<template>
	<div id="home">
    <HomeHeader :header="Header" :position="Position"></HomeHeader>
	<Sider></Sider>
    <div class="bg mt40">
		<div class="mb40">
			<!-- 图片轮播 -->
			<mt-swipe :auto="4000" class="img_style">
				<mt-swipe-item ><img src="../../assets/img/1.jpg" alt="" class="img_style"></mt-swipe-item>
				<mt-swipe-item ><img src="../../assets/img/2.jpg" alt="" class="img_style"></mt-swipe-item>
				<mt-swipe-item ><img src="../../assets/img/3.jpg" alt="" class="img_style"></mt-swipe-item>
			</mt-swipe>
			<!-- 推荐 -->
			<div class="bg2">
				<div class="title1">玩转{{Position}}</div>
				<div class="bg2_content">
					<div class="title2">推荐景点</div>
					<div class="row row1">
						<div class="col-xs-2" v-for="(item,index) in Jingdian" :key="index">
							<div class="card c1">
								<img class="card-img-top _img" :src="item.imgs" @click="mainmsg1(index)">
								<p class="lue_2">
									<mt-badge size="small" color="#fd7e14" class="badge">{{index+1}}</mt-badge>
								{{item.title}}</p>	
							</div>
						</div>
						
					</div>	
				</div>
				<div class="bg2_content">
					<div class="title2">推荐美食</div>
					<div class="row row1">
						<div class="col-xs-2" v-for="(item,index) in meishi" :key="index">
							<div class="card c1">
								<img class="card-img-top _img" :src="item.imgs" @click="mainmsg2(index)">
								<p class="lue_2">
									<mt-badge size="small" color="#fd7e14" class="badge">{{index+1}}</mt-badge>
									{{item.title}}</p>	
							</div>
						</div>
						
						
					</div>
				</div>
				<div class="bg2_content">
					<div class="title2">出行攻略</div>
					<div class="row row1">
						<div class="col-xs-2" v-for="(item,index) in jiaotong" :key="index">
							<div class="card c2">
								<!-- <img class="card-img-top _img" :src="item.imgs" alt=""> -->
								<p class=" lue_2" @click="mainmsg3(index)">
									<mt-badge size="small" color="#fd7e14" class="badge" >{{index+1}}</mt-badge>
									{{item.title}}</p>	
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>		
    </div>
	<!-- 底部Nav -->
    <Tab :tab1="homeTab1" :tab2="homeTab2" :tab3="homeTab3" :tab4="homeTab4"></Tab>
	</div>
</template>

<script>
import Tab from '@/components/Tab/Tab.vue'
import HomeHeader from '../../components/Header/HomeHeader.vue';
import Sider from '../../components/Sider/Sider.vue';
import CommonProvider from "@/providers/CommonProvider";
import { MessageBox } from 'mint-ui';

export default {
	name:'home',
	data(){
		return{
			homeTab1: '首页',
			homeTab2: '发现',
			homeTab3: '排行榜',
			homeTab4: '中心',
			Header:"",
			Position:this.$store.getters.isShowMap,
			Jingdian:[],
			meishi:[],
			jiaotong:[]
		}
	},
	components:{
		HomeHeader,
		Sider,
		Tab
	},
	methods: {
		mainmsg1(index) {
			window.localStorage.setItem("main_ID", this.Jingdian[index]._id);
			this.$router.push("/details");
		},
		mainmsg2(index) {
			window.localStorage.setItem("main_ID", this.meishi[index]._id);
			this.$router.push("/details");
		},
		mainmsg3(index) {
			window.localStorage.setItem("main_ID", this.jiaotong[index]._id);
			this.$router.push("/details");
		},
		init(){
			let data1 = {
				Position: this.Position,
				role:0
			};
			let data2 = {
				Position: this.Position,
				role:1
			};
			let data3 = {
				Position: this.Position,
				role:2
			};
			let self = this;
			CommonProvider.HomeInit(data1).then(res => {
				self.Jingdian = res.data;
			});
			CommonProvider.HomeInit(data2).then(res => {
				self.meishi = res.data;
			});
			CommonProvider.HomeInit(data3).then(res => {
				self.jiaotong = res.data;
			})
		},
	},
	mounted:function(){
		if(this.Position==''){
			MessageBox.alert('获取当前位置').then(action => {
				this.$router.push('/map');
			});
		}
		this.init();
	}
}
</script>
<style lang='scss' scoped>
.bg{
	background-color:rgb(227, 232, 252);
}
.bg2{
	margin-top: 10px !important;
	margin:0 auto;
	.title1{
		padding: 3px;
		text-align: center;
		color: rgb(255, 255, 255);
		background-color:rgb(33, 73, 252);
		height: 30px;
	}
	.bg2_content{
		background-color:rgb(255, 255, 255);
		margin-top: 5px !important;
		margin-bottom: 10px !important;
		// height: 200px;
		.title2{
			text-align: center;
			font-size: 14px;
			border-bottom-right-radius:2em;
			background-color:rgb(33, 73, 252);
			color: #ffffff;
			padding: 2px;
			height: 30px;
			width: 80px;
		}
	}
}
.img_style{
	width: 100%;
  	height: 140px;
}
.c1{
	width: 75px !important;
	height:120px !important;
	text-align: center;
	border: none !important;
	p{margin-bottom: 0px !important}
}
.c2{
	width: 75px !important;
	height:60px !important;
	text-align: center;
	border: none !important;
	p{margin-bottom: 0px !important}
}
.row1{
	margin-right: 0px !important;
	margin: 0 auto;
	font-size:12px;
}
._img{
	height: 73px;
}
</style>